<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <!-- <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            新 增
          </el-button> -->
          <!-- <el-button
            type="success"
            icon="el-icon-search"
            class="sureBtn"
            size="medium"
            @click="handleCheck"
          >
            编辑/查看
          </el-button> -->
          <el-button
            type="danger"
            class="setBtn"
            icon="el-icon-delete"
            size="medium"
            @click="handleDelete"
          >
            删 除
          </el-button>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <div class="search">
            <el-row :gutter="20">
              <el-col
                :xs="2"
                :sm="2"
                :md="2"
                :lg="2"
                :xl="2"
                style="float: right;"
              >
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  class="fr"
                  @click="searchHandleClick"
                >
                  搜索
                </el-button>
              </el-col>
              <el-col
                :xs="5"
                :sm="5"
                :md="5"
                :lg="5"
                :xl="5"
                style="float: right;"
              >
                <el-date-picker
                  v-model="selectForm.assign_time"
                  type="month"
                  class="eldatepicker"
                  value-format="yyyy-MM"
                  placeholder="捐赠月份">
                </el-date-picker>
              </el-col>
              <el-col
                :xs="5"
                :sm="5"
                :md="5"
                :lg="5"
                :xl="5"
                style="float: right;"
              >
                <el-input
                  v-model="selectForm.name"
                  size="medium"
                  placeholder="捐赠方"
                ></el-input>
              </el-col>
              <el-col
                :xs="5"
                :sm="5"
                :md="5"
                :lg="5"
                :xl="5"
                style="float: right;"
              >
                <el-input
                  v-model="selectForm.elder_name"
                  size="medium"
                  placeholder="领取人"
                ></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
        @changeForMal="changeForMal"
        @cancelOrder="cancelOrder"
      ></app-table>
    </div>
    <el-dialog
      title="物资分配"
      :visible.sync="dialogVisible"
      width="36%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="领取方" prop="elder_name">
                <el-select
                  v-model="ruleForm.elder_name"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入姓名"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  style="width: 100%;"
                  :disabled="true"
                  @change="changeolder"
                >
                  <el-option
                    v-for="olderItem in oldOptions"
                    :key="olderItem.id"
                    :label="
                      '姓名：' +
                      olderItem.name +
                      '；电话：' +
                      olderItem.mobile +
                      '；身份证：' +
                      olderItem.id_card
                    "
                    :value="olderItem.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="性别" prop="sex">
                <el-select
                  v-model="ruleForm.sex"
                  clearable
                  placeholder="请选择"
                  filterable
                  :disabled="true"
                  style="width: 100%;"
                >
                  <el-option :key="0" label="男" :value="1"></el-option>
                  <el-option :key="1" label="女" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleForm.age" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="捐赠方" prop="age">
                <el-input v-model="ruleForm.name" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-row :gutter="10">
                <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
                  <el-form-item label="物资类型" prop="type">
                    <el-select
                      v-model="ruleForm.type"
                      clearable
                      placeholder="请选择"
                      filterable
                      style="width: 100%;"
                      :disabled="true"
                    >
                      <el-option :key="0" label="现金" :value="1"></el-option>
                      <el-option :key="1" label="物资" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="领取内容" prop="goods_name">
                <el-input
                  v-model="ruleForm.goods_name"
                  :rows="5"
                  type="textarea"
                  :readonly="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row><el-divider></el-divider></el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="分配人" prop="assign_name">
                <el-input
                  v-model="ruleForm.assign_name"
                  :readonly="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="领取时间" prop="assign_time">
                <el-date-picker
                  v-model="ruleForm.assign_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期时间"
                  :picker-options="dataPickerBeforeTodayOptions"
                  style="width: 100%;"
                  :disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="medium" @click="save">
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('ruleForm')"
          >
            取 消
          </el-button>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import { assignList } from "@/api/helpManager";
  import { getList } from "@/api/oldermanager";
  export default {
    name: "Index",
    components: { appTable },
    data() {
      return {
        loading: false,
        dialogVisible: false,
        oldOptions: [],
        item: [
          {
            type: 1,
            goods_name: "现金",
          },
        ],
        ruleForm: {},
        rules: {
          name: [{ required: true, message: "请输入捐赠方", trigger: "blur" }],
          action_time: [
            { required: true, message: "选择捐赠时间", trigger: "change" },
          ],
          accept_name: [
            { required: true, message: "请输入接收人", trigger: "blur" },
          ],
        },
        currentSelectedData: [],
        pageData: {},
        selectForm: {},
        dataPickerBeforeTodayOptions: {
          readonlyDate(time) {},
        },
        tableColumns: [
          { prop: "elder_name", label: "领取人" },
          { prop: "age", label: "年龄" },
          { prop: "sex", label: "性别", formatter: this.sexFormatter },
          { prop: "name", label: "捐赠方" },
          { prop: "type", label: "物资类型", formatter: this.typeFormatter },
          { prop: "goods_name", label: "领取内容" },
          { prop: "num", label: "领取数量/金额" },
          { prop: "assign_time", label: "分配时间" },
          { prop: "assign_name", label: "分配人" },
        ],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      typeFormatter(row, column) {
        if (row.type == 1) {
          return "现金";
        } else if (row.type == 2) {
          return "物资";
        }
      },
      sexFormatter(row, column) {
        if (row.sex == 1) {
          return "男";
        } else if (row.sex == 2) {
          return "女";
        }
      },
      save() {
        this.$set(this.ruleForm, "item", this.item);
        this.$refs["ruleForm"].validate(async (valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              getDonorsList("put", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.getTableData();
                  this.cancel("ruleForm");
                }
              });
            } else {
              getDonorsList("post", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.getTableData();
                  this.cancel("ruleForm");
                }
              });
            }
          }
        });
      },
      getTableData(data) {
        assignList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", 4);
          }
        });
      },
      handleAdd() {
        this.dialogVisible = true;
        this.ruleForm = {};
      },
      closeDialog() {
        this.dialogVisible = false;
        this.$refs["ruleForm"].resetFields();
        this.ruleForm = {};
      },
      cancel(formName) {
        this.dialogVisible = false;
        this.$refs[formName].resetFields();
        this.ruleForm = {};
      },
      handleAddThing() {
        let obj = {
          type: "",
          goods_name: "",
        };
        this.item.push(obj);
      },
      handleDelThing(e) {
        if (this.item.length > 1) {
          let index = e.currentTarget.dataset.index;
          this.item.splice(index, 1);
        } else {
          this.$message({
            message: "至少捐赠一样",
            type: "warning",
          });
        }
      },
      handleCheck() {
        this.key = Math.random();
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要查看的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能查看一条内容",
            type: "warning",
          });
        } else {
          this.dialogVisible = true;
          this.ruleForm = Object.assign({}, this.currentSelectedData[0]);
        }
      },
      handleDelete() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要删除的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能删除一条内容",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.ruleForm = Object.assign({}, this.currentSelectedData[0]);
              let param = {
                id: this.ruleForm.id,
              };
              assignList("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        let param = {
          page: val,
        };
        this.getTableData(param);
      },
      searchHandleClick() {
        this.getTableData(this.selectForm);
      },
      remoteMethod(query) {
        let _this = this;
        if (query !== "") {
          this.loading = true;
          setTimeout(() => {
            let data = {
              name: query,
            };
            getList("get", data).then((resp) => {
              if (resp.code === 200) {
                console.log(resp);
                this.loading = false;
                _this.oldOptions = resp.data.list;
              }
            });
          }, 200);
        } else {
          this.oldOptions = [];
        }
      },
      changeolder(value) {
        let data = {
          id: value,
        };
        getList("get", data).then((resp) => {
          if (resp.code === 200) {
            console.log(resp);
            let data = resp.data.base;
            this.$set(this.ruleForm, "sex", data.sex);
            this.$set(this.ruleForm, "age", data.age);
          }
        });
      },
      changeForMal(data) {
        this.dialogVisible = true;
        console.log(data.rows[0])
        this.ruleForm = Object.assign({}, data.rows[0]);
      },
      cancelOrder(data) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: data.rows[0].id,
            };
            assignList("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTableData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        width: 100%;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }
      .eldatepicker{
        ::v-deep{
          .el-input__inner{
            height: 36px;
            line-height: 36px;
          }
        }
      }
    }

    .form-footer {
      padding-left: 100px;
    }
  }
</style>
